import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class OnePage extends StatefulWidget {
  @override
  _OnePageState createState() => _OnePageState();
}

class _OnePageState extends State<OnePage> {
  var number = 1;

  Widget page =
      Container(
        margin: EdgeInsets.only(left: 1, top: 1),
        //  height: MediaQuery.of(context).size.height / 5,
        //  width: MediaQuery.of(context).size.width / 3.5,
        child: Stack(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(left: 1, top: 6),
              //  height: MediaQuery.of(context).size.height / 5,
              //  width: MediaQuery.of(context).size.width / 3.5,

              child: Stack(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(
                      bottom: 30,
                    ),
                    child: Container(
                      width: 320,
                      // MediaQuery.of(context).size.width / 3.5,
                      margin: EdgeInsets.all(3),
                      child: Column(
                        children: <Widget>[
                          Text(
                            "\none",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 28,
                              color: Color.fromRGBO(67, 67, 67, 1),
                                fontWeight: FontWeight.w700
                            ),
                          ),
                          Text(
                            "test",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: 14, fontWeight: FontWeight.w700),
                          ),
                        ],
                      ),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(3))),
                    ),
                  ),
                  /* Container(
                margin: EdgeInsets.only(top: 140, left: 23),
                child: Text(
                  "29.9USD",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white, fontSize: 18),
                ),
              )*/
                ],
              ),
              decoration: BoxDecoration(
                  color: Color.fromRGBO(136, 1, 251, 1),
                  // color: Color.fromRGBO(136, 1, 251, 1),              borderRadius: new BorderRadius.vertical(top: Radius.circular(15),bottom: Radius.circular(10),), // 也可控件一边圆角大小
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5),
                      topRight: Radius.circular(5),
                      bottomLeft: Radius.circular(5),
                      bottomRight: Radius.circular(5))),
            ),
            Container(
                width: 90,
                margin: EdgeInsets.only(
                  left: 10.3,
                ),
                child: Container(
                  child: Text(
                    "title",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 16,
                        color: Colors.white,
                        fontWeight: FontWeight.w700),
                  ),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(136, 1, 251, 1),
                      borderRadius: BorderRadius.all(Radius.circular(20))),
                )),
          ],
        ),
      );

  Widget pagetwo = Container(
    margin: EdgeInsets.only(left: 1, top: 1),
    //  height: MediaQuery.of(context).size.height / 5,
    //  width: MediaQuery.of(context).size.width / 3.5,
    child: Stack(
      children: <Widget>[
        Container(
          margin: EdgeInsets.only(left: 1, top: 6),
          //  height: MediaQuery.of(context).size.height / 5,
          //  width: MediaQuery.of(context).size.width / 3.5,

          child: Stack(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(
                  bottom: 30,
                ),
                child: Container(
                  width: 320,
                  // MediaQuery.of(context).size.width / 3.5,
                  margin: EdgeInsets.all(3),
                  child: Column(
                    children: <Widget>[
                      Text(
                        "\none",
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 30,fontWeight: FontWeight.w700),
                      ),
                      Text(
                        "test",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontSize: 14, fontWeight: FontWeight.w700),
                      ),
                    ],
                  ),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(3))),
                ),
              ),
              /* Container(
                margin: EdgeInsets.only(top: 140, left: 23),
                child: Text(
                  "29.9USD",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white, fontSize: 18),
                ),
              )*/
            ],
          ),
          decoration: BoxDecoration(
              color: Color.fromRGBO(251, 80, 254, 1),
              // color: Color.fromRGBO(136, 1, 251, 1),              borderRadius: new BorderRadius.vertical(top: Radius.circular(15),bottom: Radius.circular(10),), // 也可控件一边圆角大小
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(5),
                  topRight: Radius.circular(5),
                  bottomLeft: Radius.circular(5),
                  bottomRight: Radius.circular(5))),
        ),
        Container(
            width: 90,
            margin: EdgeInsets.only(
              left: 10.3,
            ),
            child: Container(
              child: Text(
                "title",
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                    fontWeight: FontWeight.w700),
              ),
              decoration: BoxDecoration(
                  color: Color.fromRGBO(251, 80, 254, 1),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
            )),
      ],
    ),
  );

  Widget pages = Container(
    width: ScreenUtil.screenWidth / 5,
    margin: EdgeInsets.all(3),
    child: Container(
      margin: EdgeInsets.only(top: 35),
      child:  Column(
        children: <Widget>[
          Text(
            "test",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 28,),
          ),
          Text(
            "test",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700),
          ),
        ],
      ),
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(3)),
    ),
  );

  Widget pages1 = Container(
    width: 1080 / 3.5,
    margin: EdgeInsets.all(3),
    child: Container(
      margin: EdgeInsets.only(top: 35),
      child: Column(
        children: <Widget>[
          Text(
            "1",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.w700),
          ),
          Text(
            "\ntest",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700),
          ),
        ],
      ),
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(3)),
    ),
  );

  Widget pages2 = Container(
    width: 1080 / 3.5,
    margin: EdgeInsets.all(3),
    child: Container(
      margin: EdgeInsets.only(top: 35),
      child: Column(
        children: <Widget>[
          Text(
            "2",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.w700),
          ),
          Text(
            "\ntest\n",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700),
          ),
        ],
      ),
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(3)),
    ),
  );

  Widget pages3 = Container(
    width: 1080 / 3.5,
    margin: EdgeInsets.all(3),
    child: Container(
      margin: EdgeInsets.only(top: 35),
      child:  Column(
        children: <Widget>[
          Text(
            "3",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.w700),
          ),
          Text(
            "\ntest\n",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700),
          ),
        ],
      ),
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(3)),
    ),
  );

  Widget Price = Container(
    margin: EdgeInsets.only(top: 120, left: 23),
    child: Text(
      "16.9USD",
      textAlign: TextAlign.center,
      style: TextStyle(
          fontWeight: FontWeight.w700, color: Color.fromRGBO(255, 200, 255, 1), fontSize: 18),
    ),
  );

  // ignore: non_constant_identifier_names
  Widget Line = Container(
    height: 1,
    width: 100,
    margin: EdgeInsets.only(top: 116, left: 6),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Color(0xFFfb11aa), Color(0xFFa7418c)],
        begin: Alignment.bottomLeft,
        end: Alignment.bottomRight,
      ),
    ),
  );



  bool test = true;



  @override
  Widget build(BuildContext context) {

    if(test == true) {
      pages2 = pagetwo;
      test = false;
    }


    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(top: 30),
              padding: EdgeInsets.only(left: 300),
              child: GestureDetector(
                child:  Icon(
                  Icons.close,
                  color: Colors.white,
                ),
                onTap: () {
                  Navigator.of(context).pop();
                },
              )
            ),
            Container(
              margin: EdgeInsets.only(top: 40),
              child: Text(
                "Date the way you want\n with premium",
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.w700),
              ),
            ),
            Container(
                width: MediaQuery.of(context).size.width,
                height: 250.0,
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      margin: EdgeInsets.only(top: 100),
                      child: Center(
                          child: Column(
                        children: <Widget>[
                          Icon(
                            Icons.accessibility,
                            color: Colors.white,
                            size: 70.0,
                          ),
                          Text(
                            "Keep the chat going with read receipts",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                            ),
                          )
                        ],
                      )),
                    );
                  },
                  itemCount: 7,
                  pagination: new SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                        size: 5,
                        color: Colors.white70,
                        activeColor: Colors.white,
                        activeSize: 6),
                  ),
                  scrollDirection: Axis.horizontal,
                  autoplay: true,
                )),

            /* Container(

              height: 250,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Wrap(
                    children: actorWidgets.toList(),
                  ),
                ],
              ),
            ),*/

            Container(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Row(
                  children: <Widget>[
                    Container(
                      child: Stack(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(
                              left: 14,
                            ),
                            height: MediaQuery.of(context).size.height / 4.5,
                            width: MediaQuery.of(context).size.width / 3.5,
                            child: Stack(
                              children: <Widget>[
                                Container(
                                    margin: EdgeInsets.only(bottom: 40),
                                    child: GestureDetector(
                                      child: pages1,
                                      onTap: () {
                                        setState(() {
                                          number = 1;
                                          if (number == 1) {
                                            pages1 = page;
                                            pages2 = pages;
                                            pages3 = pages;
                                          }
                                        });
                                      },
                                    )),
                                Line,
                                Price,
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Stack(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(
                              left: 5,
                            ),
                            height: MediaQuery.of(context).size.height / 4.5,
                            width: MediaQuery.of(context).size.width / 3.5,
                            child: Stack(
                              children: <Widget>[
                                Container(
                                    margin: EdgeInsets.only(bottom: 40),
                                    child: GestureDetector(
                                      child: pages2,
                                      onTap: () {
                                        setState(() {
                                          number = 2;
                                          if (number == 2) {
                                            pages2 = pagetwo;
                                            pages1 = pages;
                                            pages3 = pages;
                                          }
                                        });
                                      },
                                    )),
                                Line,
                                Price,
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Stack(
                        children: <Widget>[
                          Container(
                            margin: EdgeInsets.only(
                              left: 5,
                            ),
                            height: MediaQuery.of(context).size.height / 4.5,
                            width: MediaQuery.of(context).size.width / 3.5,
                            child: Stack(
                              children: <Widget>[
                                Container(
                                    margin: EdgeInsets.only(bottom: 40),
                                    child: GestureDetector(
                                      child: pages3,
                                      onTap: () {
                                        setState(() {
                                          number = 3;
                                          if (number == 3) {
                                            pages3 = page;
                                            pages2 = pages;
                                            pages1 = pages;
                                          }
                                        });
                                      },
                                    )),
                                Line,
                                Price,
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            GestureDetector(
              child: Container(
                //CONTINUE按钮
                height: 50,
                margin: EdgeInsets.only(right: 50, left: 50, top: 20),
                child: Center(
                  child: Text(
                    "CONTINUE",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 27,
                        fontWeight: FontWeight.w700),
                  ),
                ),
                decoration: BoxDecoration(
                    color: Color.fromRGBO(251, 80, 254, 1),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
              ),
              onTap: () {
                showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                          title: Text("CONTINUE"),
                        ));
              },
            ),

            /*Container(
              child: DefaultTabController(
                child: Scaffold(
                  body: CustomScrollView(
                    slivers: <Widget>[
                      SliverAppBar(
                        pinned: true,
                        floating: true,//那么AppBar会在你做出下拉手势时就立即展开
                        expandedHeight: 300.0,
                        bottom: PreferredSize(
                          child: Container(
                            child: Text("hello"),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            )*/

            Container(
              height: 100,
              child: CustomScrollView(shrinkWrap: true, slivers: <Widget>[
                SliverPadding(
                  padding: const EdgeInsets.all(20.0),
                  sliver: new SliverList(
                    delegate: new SliverChildListDelegate(
                      <Widget>[
                        Text(
                          "Recurring billing",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              fontWeight: FontWeight.w700),
                        ),
                        Text(
                          'Happiness is a way station between too much and too little.One needs 3 things to be truly happy living in the world: some thing to do, some one to love, some thing to hope for.No matter how bad your heart has been broken, the world doesn’t stop for your grief. The sun comes right back up the next day.Accept what was and what is, and you’ll have more positive energy to pursue what will be.Until you make peace with who you are, you’ll never be content with what you have.If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.It is habit which is able to be developed rather than love and it is touch which can be obtained as time goes by rather than affection. There are no perfect relationships. Its how you accept the imperfections that makes it perfect.',
                          style: TextStyle(color: Colors.white, fontSize: 8),
                        ),
                      ],
                    ),
                  ),
                )
              ]),
            )
          ],
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Color.fromRGBO(129, 125, 222, 1),
              Color.fromRGBO(209, 104, 248, 1),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
      ),
    );
  }
}
